<template>
    <div class="code-container" @click="loginout">
        <div class="code" >
            <div class="mycode">
                <div id="code"></div>
            </div>
        </div>
        <div id="imagQrDiv"></div>
    </div>

</template>

<script>

    export default {
        name: 'code',
        data() {
            return {
               codeUrl:''

            }
        },
        created(){

            const self = this;
            self.codeUrl = self.$route.query.url;

            if(!self.codeUrl){
                self.$toast({
                    message:'请先登录再进行操作',
                    duration:2000
                });
                setTimeout(() => {
                    self.$router.push('/login');
                }, 2000);
            }
        },
        mounted: function () {
           //钩子函数，等于vue1.0中的ready
            this.$nextTick(function () {
                require ('./../../../static/js/jquery.min.js');
                require ('../../../static/js/jquery.qrcode.min.js');
                this.qrcode();
            })
        },
        methods: {
            qrcode () {
                $("#code").qrcode({
                    text: this.codeUrl,
                    width:130,
                    height:130
                });


                function convertCanvasToImage(canvas) {

                    var image = new Image();

                    image.src = canvas.toDataURL("image/png");
                    return image;
                }

                var mycanvas1=document.getElementsByTagName('canvas')[0];

                var img=convertCanvasToImage(mycanvas1);

                $(img).css({'width':'138px','height':'138px','position':'absolute','right':'2%','bottom':'2%','boxSizing':'border-box','border':'4px solid #fff'});
                $('#imagQrDiv').append(img);
            },
            loginout(){
                this.$router.back(-1);
            }
        }
    }
</script>

<style scoped>

    .code-container{
        position:absolute;
        width:100%;
        height:100%;
        z-index:10;
        margin-top:-8px;
        margin-left:-8px;

       /* background:url(../../assets/code_bg_new.jpg) no-repeat top left;*/
        background:url(../../assets/code_bg2.jpg) no-repeat top left;
        background-size:100% 100%;
    }
    .code{
        width:138px;
        height:138px;

        position:absolute;
        right:2%;
        bottom: 2%;
        box-sizing: border-box;
        border:4px solid #fff;

    }

    .mycode{
        width:100%;
        height:100%;
    }

    #imagQrDiv{
        width:100%;
        height:100%;

        position:absolute;

        box-sizing: border-box;
        z-index:99999;
    }

</style>

